<template>
  <table class="product">
    <tbody>
      <tr>
        <th>
          <input type="checkbox" v-model="checkTotal" @change="checkAll" />
        </th>
        <th>产品图片</th>
        <th>编号</th>
        <th>品牌名称</th>
        <th>价格</th>
        <th>数量</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in arr" :key="item.id">
        <td>
          <input type="checkbox" @change="check" v-model="item.check" />
        </td>
        <td>
          <img alt="" width="50" height="50" />
        </td>
        <td>{{ item.code }}</td>
        <td v-text="item.brand"></td>
        <td v-text="item.price"></td>
        <td>
          <button @click="item.number--">-</button>
          <b>{{ item.number }}</b>
          <button @click="item.number++">+</button>
        </td>
        <td><button @click="Delete(index)">删除</button></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          id: 1,
          code: "",
          src: "https://tse1-mm.cn.bing.net/th/id/R-C.fc48d5b3c65b7b79980ab09dfc2890d8?rik=jy07dRFBQAwjzw&amp;riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190322%2fe2edee9d2ee847f0b564fcbadf356a46.jpeg&amp;ehk=cKT9XpGfozyLcO5sia93t8gLeJurN9RM%2boqkkCk6a7Q%3d&amp;risl=&amp;pid=ImgRaw&amp;r=0&amp;sres=1&amp;sresct=1",
          brand: "坤坤的背带裤",
          price: 9.9,
          number: 1,
          check: false,
        },
        {
          id: 2,
          src: "https://tse1-mm.cn.bing.net/th/id/R-C.fc48d5b3c65b7b79980ab09dfc2890d8?rik=jy07dRFBQAwjzw&amp;riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190322%2fe2edee9d2ee847f0b564fcbadf356a46.jpeg&amp;ehk=cKT9XpGfozyLcO5sia93t8gLeJurN9RM%2boqkkCk6a7Q%3d&amp;risl=&amp;pid=ImgRaw&amp;r=0&amp;sres=1&amp;sresct=1",
          brand: "背带裤",
          price: 9.9,
          number: 1,
          check: false,
        },
      ],
      number: 1,
      checkTotal: false,
      newArr: [],
    };
  },
  methods: {
    checkAll() {
      if (this.checkTotal) {
        this.arr.forEach(function (item) {
          item.check = true;
        });
      } else {
        this.arr.forEach((item) => {
          item.check = false;
        });
      }
    },
    Delete(index) {
      this.arr.splice(index, 1);
    },
    check() {
      let checkArr = this.arr.filter((item) => {
        return item.check === true;
      });
      if (checkArr.length === this.arr.length) {
        this.checkTotal = true;
      } else {
        this.checkTotal = false;
      }
    },
  },
};
</script>

<style>
.product {
  border: 1px solid black;
  border-collapse: collapse;
  width: 700px;
  margin-top: 10px;
}
.product td,
.product th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}
.product tr:nth-child(1) {
  height: 40px;
  background-color: deepskyblue;
  color: white;
}
</style>
